<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      text-align: center;
      margin: 100px auto;
    }

    span {
      display: inline-block;
      width: 150px;
      height: 20px;
      border: 1px solid #ccc;
      font-size: 12px;
      line-height: 20px;
      text-align: left;
      padding-left: 20px;
      background-color: #eee;
      color: #999;
    }

    .right { /*正确的*/
      color: #5EFF5E;
      background: url(images/right.png) no-repeat #DFFFDF 4px 3px;
      border: 1px solid #ACFFAC;
    }

    .wrong { /*错误的*/
      background: url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
      border: 1px solid #FFAC91;
      color: #FF6B39;
    }
  </style>
  <script>
    window.onload = function () {
      function $(id) {
        return document.getElementById(id);
      }

      $('txt').onblur = function () {
//        alert(this.value);
        if (this.value == "") {
          $("result").className = "wrong";
          $("result").innerHTML = "内容不能为空";
        } else if (isNaN(this.value)) {
          $("result").className = "wrong";
          $("result").innerHTML = "请输入数字";
        } else if (this.value > 150 || this.value < 0) {
          $("result").className = "wrong";
          $("result").innerHTML = "请输入合理范围";
        } else {
          $("result").className = "right";
          $("result").innerHTML = "输入正确";
        }
      }
    }

  </script>
</head>
<body>
<div class="box">
  语文: <input id="txt" type="text"/> <span id="result">请输入成绩</span>
</div>
</body>
</html>